<template>
    <view class="content" :style="{ paddingTop: configStore.paddingTop + 10 + 'px' }">
        <hearbar>
            <view class="flex flex-center" style="width: 100%;">
                <up-tabs :list="list_tabs" @click="tabsClick" :current="currentIndex"></up-tabs>
            </view>
        </hearbar>
        <view class="body">
            <view v-for="people in list" class="flex item align-center flex-between back-white"
                v-if="list.length !== 0">
                <view class="flex align-center">
                    <up-image :src="people.img_url" width="70px" height="70px" shape="circle" @click="jumpToShow(people.openid)"></up-image>
                    <view class="m-l-ll">
                        <view class="font-18">{{ people.nick_name }}</view>
                        <view class="font-14">{{ people.sgin }}</view>
                    </view>
                </view>
                <view v-if="currentIndex !== 2">
                    <up-button @click="handle(people)">{{ getStatus(people.type) }}</up-button>
                </view>
            </view>
            <view style="text-align: center;height: 100px;line-height: 100px;" v-else class="back-white">
                暂无数据
            </view>
        </view>
    </view>
</template>


<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { onMounted, ref, watch } from 'vue';
import { attention, getUserFriend } from '../../utils/api';
const currentIndex = ref(0);
const list = ref([]);
const searchForm = ref({
    type: 0
})
const getList = () => {
    getUserFriend(searchForm.value).then((res) => {
        if (res.code === 200) {
            list.value = res.data;
        }
    })
}
const getStatus = (type) => {
    if (searchForm.value.type === 0) {
        if (type === 0) {
            return "取消关注"
        } else {
            return "互相关注"
        }
    } else if (searchForm.value.type === 1) {
        if (type === 0) {
            return "回关"
        } else {
            return "互相关注"
        }
    }
}
const list_tabs = [
    {
        name: "关注",
        value: 0
    },
    {
        name: "粉丝",
        value: 1
    },
    {
        name: '互相关注',
        value: 2
    }
]
const tabsClick = ({ value }) => {
    currentIndex.value = value;
    searchForm.value.type = value;
    getList();
}
const handle = ({ openid, type }) => {
    if (currentIndex.value === 1 && type === 0) {
        uni.showModal({
            content: '确定要回关吗',
            success: ({ confirm }) => {
                if (confirm) {
                    attention({
                        openid_user: openid,
                        type: 1
                    }).then((res) => {
                        if (res.code === 200) {
                            uni.showToast({
                                title: "回关成功"
                            })
                            getList();
                        }
                    })

                }
            },
        })
        return
    }
    uni.showModal({
        content: '确定要取消关注吗',
        success: ({ confirm }) => {
            if (confirm) {
                attention({
                    openid_user: openid,
                    type: 0
                }).then((res) => {
                    if (res.code === 200) {
                        uni.showToast({
                            title: "取消成功"
                        })
                        getList();
                    }
                })

            }
        },
    })
}
const jumpToShow = (openid) => {    
    debugger
	uni.redirectTo({
		url: `/pages/home/show?openid=${openid}`
	})
}
onLoad(({ type }) => {
    currentIndex.value = Number(type);
});
onMounted(() => {
    getList();
})
</script>

<style lang="less" scoped>
.item {

    width: 100%;
    height: 100px;
    box-sizing: border-box;
    padding: 0 10px;
}
</style>
